import { defineComponent, unref, ref, watch, defineExpose } from 'vue';
import { Table, Button, Space } from 'ant-design-vue';
import { SchemaTableProps } from './types';
import { useTableState, useTableMethods } from './hooks';

export default defineComponent({
  name: 'SchemaTable',
  props: SchemaTableProps,
  setup(props, { slots }) {
    const tableState = useTableState({ props });
    const { tableData, paginationRef } = tableState;
    const { fetchTableData, handleTableChange, reload } = useTableMethods({
      props,
      state: tableState,
    });

    const getBindValues = {
      size: 'middle',
      scroll: '{x: 1500 }',
      title: () => (
        <div class="align-items_center justify_between">
          <div>{props.headerTitle}</div>
          <Space> {slots.toolbar?.()} </Space>
        </div>
      ),
    };
    fetchTableData();

    defineExpose({
      reload,
    });

    return () => {
      return (
        <div class="section">
          <div class="row">form container</div>
          <Table
            class="row"
            {...getBindValues}
            columns={props.columns}
            pagination={unref(paginationRef)}
            data-source={unref(tableData)}
            onChange={handleTableChange}
          ></Table>
        </div>
      );
    };
  },
});
